import '../../config/resource_manager.dart';
import '../../public.dart';

class MomentsItem extends StatefulWidget {
  final Data item;
  final HomeModel model;
  MomentsItem({Key key, @required this.item, this.model}) : super(key: key);

  @override
  _MomentsItem createState() => _MomentsItem();
}

class _MomentsItem extends State<MomentsItem> {
  List<String> _testUrls = [
    'https://s1.ax1x.com/2020/04/06/G6FKR1.jpg',
    'https://s1.ax1x.com/2020/04/06/G6FKR1.jpg',
    'https://s1.ax1x.com/2020/04/06/G6FKR1.jpg',
    'https://s1.ax1x.com/2020/04/06/G6FKR1.jpg',
  ];
  HomeModel model;
  Data item;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.model = widget.model;
    this.item = widget.item;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: model.themeModel.customThemeData.mainColor,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _itemLeft(),
          Container(
//            color: Color(0xFF474749),
            margin: EdgeInsets.fromLTRB(
                0, ScreenUtil().setWidth(10), 0, ScreenUtil().setWidth(10)),
            width: ScreenUtil().setWidth(750 - 20 - 100 - 20),
            child: Column(
              children: <Widget>[
                _itemUser(),
                _block(ScreenUtil().setWidth(10)),
                _images(),
                _texts(),
                _location(),
                _bottomActions(),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _itemLeft() {
    return Container(
      margin: EdgeInsets.fromLTRB(
          ScreenUtil().setWidth(10),
          ScreenUtil().setWidth(10),
          ScreenUtil().setWidth(10),
          ScreenUtil().setWidth(10)),
//      color: Colors.black,
      child: Container(
        padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
        height: ScreenUtil().setWidth(100),
        width: ScreenUtil().setWidth(100),
        child: ClipOval(
          child: CachedImage(
            url: "https://s1.ax1x.com/2020/04/06/G6FKR1.jpg",
          ),
        ),
      ),
    );
  }

  Widget _itemUser() {
    return Container(
      height: ScreenUtil().setWidth(100),
      child: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Expanded(
            flex: 7,
            child: Container(
              alignment: Alignment.centerLeft,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    item.title + ":飞翔的企鹅",
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(30),
                      color:
                          model.themeModel.currentBrightness == Brightness.light
                              ? Color(0xFF555555)
                              : Color(0xFFe2e2e2),
                    ),
                  ),
                  Text(
                    "发布于14分钟前",
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(20),
                      color:
                          model.themeModel.currentBrightness == Brightness.light
                              ? Color(0xFF666666)
                              : Color(0xFF666666),
                    ),
                  )
                ],
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              alignment: Alignment.center,
//              color: Colors.yellow,
              child: _othersRightAction(),
            ),
          )
        ],
      ),
    );
  }

  Widget _images() {
    return Container(
      alignment: Alignment.centerLeft,
      child: Container(
        width: ScreenUtil().setWidth((750 - 20 - 100 - 20) * 0.8),
//        color: Colors.lightBlue,
        padding: EdgeInsets.fromLTRB(
            0, ScreenUtil().setWidth(10), 0, ScreenUtil().setWidth(10)),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //横轴元素个数
              crossAxisCount: () {
                return _testUrls.length < 2 ? _testUrls.length : 2;
              }(),
              //纵轴间距
              mainAxisSpacing: 3,
              //横轴间距
              crossAxisSpacing: 3,
              //子组件宽高长度比例
              childAspectRatio: 1.0),
          itemCount: () {
            return _testUrls.length <= 4 ? _testUrls.length : 4;
          }(),
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {
            return ClipRRect(
                borderRadius: BorderRadius.circular(ScreenUtil().setWidth(10)),
                child: GestureDetector(
                  onTap: () {
                    showDialog(
                        context: context,
                        child: PreviewImages(
                            urls: _testUrls, currentIndex: index));
                  },
                  child: Container(
                    child: (index == 3 && _testUrls.length > 4)
                        ? Stack(
                            children: <Widget>[
                              CachedImage(
                                url: _testUrls[index],
                              ),
                              Positioned(
                                left: 0,
                                top: 0,
                                right: 0,
                                bottom: 0,
                                child: Container(
                                  color: Color.fromARGB(150, 0, 0, 0),
                                  alignment: Alignment.center,
                                  child: Text(
                                    "+" + (_testUrls.length - 4).toString(),
                                    style: TextStyle(
                                      fontSize: ScreenUtil().setSp(60),
                                      color:
                                          model.themeModel.currentBrightness ==
                                                  Brightness.light
                                              ? Color(0xFF555555)
                                              : Color(0xFFc4c4c4),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          )
                        : CachedImage(
                            url: _testUrls[index],
                          ),
                  ),
                ));
          },
        ),
      ),
    );
  }

  Widget _texts() {
    return Container(
      alignment: Alignment.centerLeft,
      margin: EdgeInsets.symmetric(vertical: ScreenUtil().setWidth(10)),
      child: Container(
        width: ScreenUtil().setWidth((750 - 20 - 100 - 20) * 0.9),
        child: Text(
          item.content,
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            color: model.themeModel.currentBrightness == Brightness.light
                ? Color(0xFF555555)
                : Color(0xFFFFFFFF),
            fontSize: ScreenUtil().setWidth(26),
          ),
        ),
      ),
    );
  }

  Widget _location() {
    return Container(
      margin: EdgeInsets.symmetric(vertical: ScreenUtil().setWidth(10)),
      alignment: Alignment.centerLeft,
      child: Row(
        children: <Widget>[
//          Icon(
//            Icons.my_location,
//            color: model.themeModel.currentBrightness == Brightness.light
//                ? Color(0xFF666666)
//                : Color(0xFF666666),
//            size: ScreenUtil().setSp(26),
//          ),
          Text(
            " 郑州",
            style: TextStyle(
                fontSize: ScreenUtil().setSp(26),
                color: model.themeModel.currentBrightness == Brightness.light
                    ? Color(0xFF666666)
                    : Color(0xFF666666)),
          ),
          Icon(
            Icons.arrow_forward_ios,
            color: model.themeModel.currentBrightness == Brightness.light
                ? Color(0xFF666666)
                : Color(0xFF666666),
            size: ScreenUtil().setSp(26),
          )
        ],
      ),
    );
  }

  Widget _bottomActions() {
    return Container(
      alignment: Alignment.centerLeft,
      child: Container(
        width: ScreenUtil().setWidth((750 - 20 - 100 - 20) * 0.97),
        height: ScreenUtil().setHeight(50),
        child: Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(),
            ),
            Expanded(
              flex: 1,
              child: Container(
                alignment: Alignment.centerRight,
                child: GestureDetector(
                  onTap: () {
                    Fluttertoast.showToast(
                        msg: "comments button has been clicked!");
                  },
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Icon(
                        IconFonts.comment,
                        size: ScreenUtil().setSp(36),
                        color: model.themeModel.currentBrightness ==
                                Brightness.light
                            ? Color(0xFF444444)
                            : Color(0xFF444444),
                      ),
                      Text(
                        " 20",
                        style: TextStyle(
                          fontSize: ScreenUtil().setSp(24),
                          color: model.themeModel.currentBrightness ==
                                  Brightness.light
                              ? Color(0xFF444444)
                              : Color(0xFF444444),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                alignment: Alignment.centerRight,
                child: GestureDetector(
                  onTap: () {
                    Fluttertoast.showToast(
                        msg: "like button has been clicked!");
                  },
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Icon(
                        IconFonts.likeActive,
                        size: ScreenUtil().setSp(38),
                        color: model.themeModel.currentBrightness ==
                                Brightness.light
                            ? Color(0x8Afb7299)
                            : Color(0xFF444444),
                      ),
                      Text(
                        " 20",
                        style: TextStyle(
                          fontSize: ScreenUtil().setSp(24),
                          color: model.themeModel.currentBrightness ==
                                  Brightness.light
                              ? Color(0xFF444444)
                              : Color(0xFF444444),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _othersRightAction() {
    return Container(
      padding: EdgeInsets.fromLTRB(
          ScreenUtil().setWidth(20),
          ScreenUtil().setWidth(10),
          ScreenUtil().setWidth(20),
          ScreenUtil().setWidth(10)),
      child: GestureDetector(
        onTap: () {
          Fluttertoast.showToast(msg: "关注被点击了");
        },
        child: Row(
          children: <Widget>[
            Icon(
              Icons.add,
              color: model.themeModel.currentBrightness == Brightness.light
                  ? Color(0xFFfb7299)
                  : Color(0xFF666666),
              size: ScreenUtil().setSp(30),
            ),
            Text(
              " 关注",
              style: TextStyle(
                  color: model.themeModel.currentBrightness == Brightness.light
                      ? Color(0xFFfb7299)
                      : Color(0xFF666666)),
            )
          ],
        ),
      ),
    );
  }

  Widget _block(double height) {
    return Container(
      color: Colors.transparent,
      height: height,
    );
  }
}

class Data {
  int id;
  String title;
  String content;
  Data(
      {Key key,
      @required this.id,
      @required this.title,
      @required this.content});

  factory Data.fromJson(Map<String, dynamic> json) {
    return Data(
      id: json['id'],
      title: json['title'],
      content: json['content'],
    );
  }
  static List<Data> listFromJson(List<dynamic> json) {
    List<Data> _list = [];
    json.forEach((value) {
      _list.add(Data.fromJson(value));
    });
    return _list;
  }
}
